import React from 'react';
import { Link } from 'react-router-dom';

const HomePage: React.FC = () => {
  return (
    <div className="home-page">
      <div className="hero-section">
        <h1>React Hooks 学习演示</h1>
        <p className="subtitle">通过实例学习React Hooks的用法</p>
      </div>
      
      <div className="hooks-grid">
        <div className="hook-card">
          <h3>useState</h3>
          <p>状态管理的基础Hook，用于在函数组件中添加状态</p>
          <Link to="/use-state" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>useEffect</h3>
          <p>处理副作用，如数据获取、订阅或手动更改DOM</p>
          <Link to="/use-effect" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>useContext</h3>
          <p>在组件树中共享数据，避免props drilling</p>
          <Link to="/use-context" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>useReducer</h3>
          <p>复杂状态逻辑的替代方案，适用于复杂的状态管理</p>
          <Link to="/use-reducer" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>useRef</h3>
          <p>访问DOM元素或存储可变值，不会触发重新渲染</p>
          <Link to="/use-ref" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>useMemo</h3>
          <p>缓存计算结果，避免不必要的重复计算</p>
          <Link to="/use-memo" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>useCallback</h3>
          <p>缓存函数引用，避免子组件不必要的重新渲染</p>
          <Link to="/use-callback" className="demo-link">查看演示</Link>
        </div>
        
        <div className="hook-card">
          <h3>自定义Hook</h3>
          <p>创建可复用的逻辑，遵循Hook的规则和约定</p>
          <Link to="/custom-hook" className="demo-link">查看演示</Link>
        </div>
      </div>
    </div>
  );
};

export default HomePage;